
var i=1;
function Point3(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
    
    /**
     * Y->Z
     */
    this.rotaXFromY2ZByDegree = function(degree) {
        cosValue = Math.cos(degree*Math.PI/180);
        sinValue = Math.sin(degree*Math.PI/180);
        this.rotaXFromY2Z(sinValue, cosValue)
    }

    /**
     * 前提 sinValue*sinValue + cosValue*cosValue = 1
     */
    this.rotaXFromY2Z = function(sinValue, cosValue) {
        var y = this.y;
        var z = this.z;
        this.y = y*cosValue - z*sinValue;
        this.z = y*sinValue + z*cosValue;
        sum = this.x*this.x+this.y*this.y+this.z*this.z;
        // console.log("cos:%s, sin:%s, x:%s, y:%s, z:%s, sum:%s",cosValue, sinValue, this.x, this.y, this.z, sum);    
    }

    this.rotaXFromY2ZByPointAndDegree = function(point, degree) {
        //第一步将原点平移到point点上，求平移之后的该点坐标
        this.move(point.x * -1, point.y * -1, point.z * -1);
        //第二步旋转该点
        this.rotaXFromY2ZByDegree(degree);
        //第三步将旋转后的点在平移回原坐标系，求坐标值
        this.move(point.x, point.y, point.z);
    }

    /**
     * X->Z
     */
    this.rotaYFromX2ZByDegree = function(degree) {
        cosValue = Math.cos(degree*Math.PI/180);
        sinValue = Math.sin(degree*Math.PI/180);
        this.rotaYFromX2Z(sinValue, cosValue);
    }

     /**
     * 前提 sinValue*sinValue + cosValue*cosValue = 1
     */
    this.rotaYFromX2Z = function(sinValue, cosValue) {
        var x = this.x;
        var z = this.z;
        this.x = x*cosValue - z*sinValue;
        this.z = x*sinValue + z*cosValue;
        sum = this.x*this.x+this.y*this.y+this.z*this.z;
        // console.log("cos:%s, sin:%s, x:%s, y:%s, z:%s, sum:%s",cosValue, sinValue, this.x, this.y, this.z, sum); 
    }

    this.rotaYFromX2ZByPointAndDegree = function(point, degree) {
        this.move(point.x * -1, point.y * -1, point.z * -1);
        this.rotaYFromX2ZByDegree(degree);
        this.move(point.x, point.y, point.z);
    }

    /**
     * Y->X
     */
    this.rotaZFromX2YByDegree = function(degree) {
        cosValue = Math.cos(degree*Math.PI/180);
        sinValue = Math.sin(degree*Math.PI/180);
        this.rotaZFromX2Y(sinValue, cosValue);
    }

     /**
     * 前提 sinValue*sinValue + cosValue*cosValue = 1
     */
    this.rotaZFromX2Y = function(sinValue, cosValue) {
        var x = this.x;
        var y = this.y;
        this.x = x*cosValue - y*sinValue;
        this.y = x*sinValue + y*cosValue;
        sum = this.x*this.x+this.y*this.y+this.z*this.z;
        // console.log("cos:%s, sin:%s, x:%s, y:%s, z:%s, sum:%s",cosValue, sinValue, this.x, this.y, this.z, sum); 
    }

    this.rotaZFromX2YByDegreeByPointAndDegree = function(point, degree) {
        this.move(point.x * -1, point.y * -1, point.z * -1);
        this.rotaZFromX2YByDegree(degree);
        this.move(point.x, point.y, point.z);
    }

    this.rotaXByPoint = function(point, degree) {
        //第一步 将原点移动到point点上
        this.move(point.x * -1, point.y * -1, point.z * -1);
        //第二步 将该点旋转到z轴上
            //x->y
            var sinValueFromX2YToXoZ = null;
            var cosValueFromX2YToXoZ = null;
            if (this.y != 0 || this.x != 0) {
                sinValueFromX2YToXoZ = this.y/Math.sqrt(this.y*this.y+this.x*this.x);
                cosValueFromX2YToXoZ = this.x/Math.sqrt(this.y*this.y+this.x*this.x);
                if (this.y >=0) {
                    //到x轴负半轴
                    cosValueFromX2YToXoZ = cosValueFromX2YToXoZ * -1;
                } else {
                    //到x轴正半轴
                    sinValueFromX2YToXoZ = sinValueFromX2YToXoZ * -1;
                }
                this.rotaZFromX2Y(sinValueFromX2YToXoZ, cosValueFromX2YToXoZ);
            } 
            //x->z
            var sinValueFromX2ZToYoZ = null;
            var cosValueFromX2ZToYoZ = null;
            if (this.x != 0 || this.z != 0) {
                sinValueFromX2ZToYoZ = this.x/Math.sqrt(this.z*this.z+this.x*this.x);
                cosValueFromX2ZToYoZ = this.z/Math.sqrt(this.z*this.z+this.x*this.x);
                if (this.x < 0) {
                    sinValueFromX2ZToYoZ = sinValueFromX2ZToYoZ * -1;
                    cosValueFromX2ZToYoZ = cosValueFromX2ZToYoZ * -1;
                }
                this.rotaYFromX2Z(sinValueFromX2ZToYoZ, cosValueFromX2ZToYoZ);
            }
        //第三步 将旋转到z轴上的点，绕x轴旋转degree度
        this.rotaXFromY2ZByDegree(degree);
        //第四步 逆转第二步
            //z->x
            if (sinValueFromX2ZToYoZ != null || cosValueFromX2ZToYoZ != null) {
                this.rotaYFromX2Z(sinValueFromX2ZToYoZ * -1, cosValueFromX2ZToYoZ);
            }
            if (sinValueFromX2YToXoZ != null || cosValueFromX2YToXoZ != null) {
                this.rotaZFromX2Y(sinValueFromX2YToXoZ * -1, cosValueFromX2YToXoZ);
            }
        //第五步 逆转第一步
        this.move(point.x, point.y, point.z);
    }

    this.rotaZByPoint = function(point, degree) {
        //第一步 将原点移动到point点上
        this.move(point.x * -1, point.y * -1, point.z * -1);
        //第二步 将该点旋转到x轴上
            //y->z
            var sinValueFromY2ZToXoZ = null;
            var cosValueFromY2ZToXoZ = null;
            if (this.z != 0 || this.y != 0) {
                sinValueFromY2ZToXoZ = this.y/Math.sqrt(this.y*this.y+this.z*this.z);
                cosValueFromY2ZToXoZ = this.z/Math.sqrt(this.y*this.y+this.z*this.z);
                if (this.y < 0 ) {
                    sinValueFromY2ZToXoZ = sinValueFromY2ZToXoZ * -1;
                    cosValueFromY2ZToXoZ = cosValueFromY2ZToXoZ * -1;
                }
                this.rotaXFromY2Z(sinValueFromY2ZToXoZ, cosValueFromY2ZToXoZ);
            } 
            //z->x
            var sinValueFromZ2XToXoY = null;
            var cosValueFromZ2XToXoY = null;
            if (this.x != 0 || this.z != 0) {
                sinValueFromZ2XToXoY = this.z/Math.sqrt(this.x*this.x+this.z*this.z);
                cosValueFromZ2XToXoY = this.x/Math.sqrt(this.x*this.x+this.z*this.z);
                if (this.z >= 0) {
                    cosValueFromZ2XToXoY = cosValueFromZ2XToXoY * -1;
                } else {
                    sinValueFromZ2XToXoY = sinValueFromZ2XToXoY * -1;
                }
                this.rotaYFromX2Z(sinValueFromZ2XToXoY, cosValueFromZ2XToXoY);
            }
        //第三步 将旋转到x轴上的点，绕z轴旋转degree度
        this.rotaZFromX2YByDegree(degree);
        //第四步 逆转第二步
            if (sinValueFromZ2XToXoY != null || cosValueFromZ2XToXoY != null) {
                this.rotaYFromX2Z(sinValueFromZ2XToXoY * -1, cosValueFromZ2XToXoY);
            }
            if (sinValueFromY2ZToXoZ != null || cosValueFromY2ZToXoZ != null) {
                this.rotaXFromY2Z(sinValueFromY2ZToXoZ * -1, cosValueFromY2ZToXoZ);
            }
        //第五步 逆转第一步
        this.move(point.x, point.y, point.z);
    }

    this.rotaYByPoint = function(point, degree) {
         //第一步 将原点移动到point点上
        //  console.log("起点:x:%s, y:%s, z:%s", this.x, this.y, this.z);
         this.move(point.x * -1, point.y * -1, point.z * -1);
        //  console.log("移动后:x:%s, y:%s, z:%s", this.x, this.y, this.z);
         //第二步 将该点旋转到z轴上
             //x->y
             var sinValueFromY2XToXoZ = null;
             var cosValueFromY2XToXoZ = null;
             if (this.y != 0 || this.x != 0) {
                 sinValueFromY2XToXoZ = this.y/Math.sqrt(this.y*this.y+this.x*this.x);
                 cosValueFromY2XToXoZ = this.x/Math.sqrt(this.y*this.y+this.x*this.x);
                 if (this.y >= 0) {
                    cosValueFromY2XToXoZ = cosValueFromY2XToXoZ * -1;
                 } else {
                    sinValueFromY2XToXoZ = sinValueFromY2XToXoZ * -1;
                 }
                 this.rotaZFromX2Y(sinValueFromY2XToXoZ, cosValueFromY2XToXoZ);
             } 
            //  console.log("1、x:%s, y:%s, z:%s", this.x, this.y, this.z);
             //x->z
             var sinValueFromX2ZToYoZ = null;
             var cosValueFromX2ZToYoZ = null;
             if (this.x != 0 || this.z != 0) {
                sinValueFromX2ZToYoZ = this.x/Math.sqrt(this.z*this.z+this.x*this.x);
                cosValueFromX2ZToYoZ = this.z/Math.sqrt(this.z*this.z+this.x*this.x);
                 if (this.x < 0) {
                    cosValueFromX2ZToYoZ = cosValueFromX2ZToYoZ * -1;
                    sinValueFromX2ZToYoZ = sinValueFromX2ZToYoZ * -1;
                 } 
                 this.rotaYFromX2Z(sinValueFromX2ZToYoZ, cosValueFromX2ZToYoZ);
             }
            //  console.log("2、x:%s, y:%s, z:%s", this.x, this.y, this.z);
         //第三步 将旋转到z轴上的点，绕y轴旋转degree度
        //  console.log("原:x:%s, y:%s, z:%s", this.x, this.y, this.z);
        //  console.log("sinValueFromY2XToXoZ:%s, cosValueFromY2XToXoZ:%s", sinValueFromY2XToXoZ, cosValueFromY2XToXoZ);
        //  console.log("sinValueFromX2ZToYoZ:%s, cosValueFromX2ZToYoZ:%s", sinValueFromX2ZToYoZ, cosValueFromX2ZToYoZ);
         this.rotaYFromX2ZByDegree(degree);
        //  console.log("后:x:%s, y:%s, z:%s", this.x, this.y, this.z);
         //第四步 逆转第二步
             //z->x
             if (sinValueFromX2ZToYoZ != null || cosValueFromX2ZToYoZ != null) {
                 this.rotaYFromX2Z(sinValueFromX2ZToYoZ * -1, cosValueFromX2ZToYoZ);
             }
            //  console.log("逆2、x:%s, y:%s, z:%s", this.x, this.y, this.z);
             if (sinValueFromY2XToXoZ != null || cosValueFromY2XToXoZ != null) {
                 this.rotaZFromX2Y(sinValueFromY2XToXoZ * -1, cosValueFromY2XToXoZ);
             }
            //  console.log("逆1、x:%s, y:%s, z:%s", this.x, this.y, this.z);
         //第五步 逆转第一步
         this.move(point.x, point.y, point.z);
        //  console.log("移动还原后:x:%s, y:%s, z:%s", this.x, this.y, this.z);
        //  console.log("");
    }

    /**
     * 正交平行投影
     */
    this.transform3DTo2DPlane = function(cammer, cammerV) {
        var d = (cammerV.x * (this.x - cammer.x) + cammerV.y * (this.y - cammer.y) + cammerV.z * (this.z - cammer.z)) / (cammerV.x*cammerV.x + cammerV.y*cammerV.y + cammerV.z*cammerV.z);
        //d小于0说明不再照相机内
        if (d < 0) {
            // console.log("NaN, cammer: x:%s, y:%s, z:%s, cammerV: x:%s, y:%s, z:%s", cammer.x, cammer.y, cammer.z, cammerV.x, cammerV.y, cammerV.z);
            // console.log("NaN, point: x:%s, y:%s, z:%s", this.x, this.y, this.z);
            this.x = NaN;
            this.y = NaN;
            this.z = NaN;
            return;
        }
        this.x = (this.x - d * cammerV.x);
        this.y = (this.y - d * cammerV.y);
        this.z = (this.z - d * cammerV.z);
    }

    this.conver3DTo2DPoint = function(cammer, cammerV) {
        var point = new Point();
        this.transform3DTo2DPlane(cammer, cammerV);
        var tempCammerV = cammerV.copy();
        //求两次转换的sin与cos值
        //x->y
        var sinValueFromY2XToXoZ = null;
        var cosValueFromY2XToXoZ = null;
        if (tempCammerV.y != 0 || tempCammerV.x != 0) {
            sinValueFromY2XToXoZ = -1 * (tempCammerV.y/Math.sqrt(tempCammerV.y*tempCammerV.y+tempCammerV.x*tempCammerV.x));
            cosValueFromY2XToXoZ = tempCammerV.x/Math.sqrt(tempCammerV.y*tempCammerV.y+tempCammerV.x*tempCammerV.x);

            // sinValueFromY2XToXoZ = (tempCammerV.y/Math.sqrt(tempCammerV.y*tempCammerV.y+tempCammerV.x*tempCammerV.x));
            // cosValueFromY2XToXoZ = tempCammerV.x/Math.sqrt(tempCammerV.y*tempCammerV.y+tempCammerV.x*tempCammerV.x);
            // if (tempCammerV.y >  0) {
            //     cosValueFromY2XToXoZ = cosValueFromY2XToXoZ * -1;
            // } else {
            //     sinValueFromY2XToXoZ = sinValueFromY2XToXoZ * -1;
            // }

            tempCammerV.rotaZFromX2Y(sinValueFromY2XToXoZ, cosValueFromY2XToXoZ);
        }
        //x->z
        var sinValueFromX2ZToYoZ = null;
        var cosValueFromX2ZToYoZ = null;
        if (tempCammerV.x != 0 || tempCammerV.z != 0) {
            sinValueFromX2ZToYoZ = tempCammerV.x/Math.sqrt(tempCammerV.z*tempCammerV.z+tempCammerV.x*tempCammerV.x);
            cosValueFromX2ZToYoZ = tempCammerV.z/Math.sqrt(tempCammerV.z*tempCammerV.z+tempCammerV.x*tempCammerV.x);

            // sinValueFromX2ZToYoZ = tempCammerV.x/Math.sqrt(tempCammerV.z*tempCammerV.z+tempCammerV.x*tempCammerV.x);
            // cosValueFromX2ZToYoZ = tempCammerV.z/Math.sqrt(tempCammerV.z*tempCammerV.z+tempCammerV.x*tempCammerV.x);
            // if ( tempCammerV.x < 0) {
            //     sinValueFromX2ZToYoZ = sinValueFromX2ZToYoZ * -1;
            //     cosValueFromX2ZToYoZ = cosValueFromX2ZToYoZ * -1;
            // }

        }
        //第一次转换
        if (sinValueFromY2XToXoZ != null || cosValueFromY2XToXoZ != null) {
            this.rotaZFromX2Y(sinValueFromY2XToXoZ, cosValueFromY2XToXoZ);
        }
        //第二次到平面
        if (sinValueFromX2ZToYoZ != null || cosValueFromX2ZToYoZ != null) {
            this.rotaYFromX2Z(sinValueFromX2ZToYoZ, cosValueFromX2ZToYoZ);
        }
        point.x = (this.x+10) * 30;
        point.y = (this.y+10) * 30;
        // console.log("x:%s, y:%s, z:%s", point.x, point.y, this.z);
        return point;
    }

    this.move = function(x, y, z) {
        this.moveX(x);
        this.moveY(y);
        this.moveZ(z);
    }

    this.moveX = function(x) {
        this.x = this.x + x;
    }

    this.moveY = function(y) {
        this.y = this.y + y;
    }
    
    this.moveZ = function(z) {
        this.z = this.z + z;
    }


    this.copy = function() {
        var point = new Point3();
        point.x = this.x;
        point.y = this.y;
        point.z = this.z;
        return point;
    }

}

function Point(x, y) {
    this.x = x;
    this.y = y;
    this.rotaX2YByDegree = function(degree) {
        cosValue = Math.cos(degree*Math.PI/180);
        sinValue = Math.sin(degree*Math.PI/180);
        this.rotaY2Z(sinValue, cosValue);
    }
    this.rotaX2Y = function(sinValue, cosValue) {
        this.x = this.x*cosValue - this.y*sinValue;
        this.y = this.x*sinValue + this.y*cosValue;
    }
}

function Cammer(x, y, z) {
    return new Point3(x, y, z);
}

function CammerV(x, y, z) {
    return new Point3(x, y, z);
}

function Cube(centerPoint, width) {
    /**
     *        7______6
     *       / |     /|
     *      3------2  |
     *      | 4|___|__|5
     *     0|/_____1|/  
     *          
     */
    this.point = [new Point3(centerPoint.x-(width/2), centerPoint.y-(width/2), centerPoint.z+(width/2)),
        new Point3(centerPoint.x+(width/2), centerPoint.y-(width/2), centerPoint.z+(width/2)),
        new Point3(centerPoint.x+(width/2), centerPoint.y+(width/2), centerPoint.z+(width/2)),
        new Point3(centerPoint.x-(width/2), centerPoint.y+(width/2), centerPoint.z+(width/2)),
        new Point3(centerPoint.x-(width/2), centerPoint.y-(width/2), centerPoint.z-(width/2)),
        new Point3(centerPoint.x+(width/2), centerPoint.y-(width/2), centerPoint.z-(width/2)),
        new Point3(centerPoint.x+(width/2), centerPoint.y+(width/2), centerPoint.z-(width/2)),
        new Point3(centerPoint.x-(width/2), centerPoint.y+(width/2), centerPoint.z-(width/2))];
    this.drawCube = function(ctx, cammer, cammerV) {
        var point2D = new Array();
        // console.log("begin -----")
        for (var i=0; i<this.point.length; i++) {
            point2D[i] = this.point[i].conver3DTo2DPoint(cammer, cammerV);
        }
        // console.log("end ------")
        var flag = true;
        if (flag) {
        //面1
        drawPlateWithColor(ctx, point2D[0], point2D[1], point2D[2], point2D[3], 'red');
        //面2 
        drawPlateWithColor(ctx, point2D[0], point2D[4], point2D[7], point2D[3], 'orange');
        //面3
        drawPlateWithColor(ctx, point2D[0], point2D[4], point2D[5], point2D[1], 'yellow');
        //面4
        drawPlateWithColor(ctx, point2D[1], point2D[5], point2D[6], point2D[2], 'green');
        //面5
        drawPlateWithColor(ctx, point2D[2], point2D[6], point2D[7], point2D[3], 'blue');
        //面6
        drawPlateWithColor(ctx, point2D[4], point2D[5], point2D[6], point2D[7], 'purple');
        } else {
//面1
drawPlate(ctx, point2D[0], point2D[1], point2D[2], point2D[3]);
//面2 
drawPlate(ctx, point2D[0], point2D[4], point2D[7], point2D[3]);
//面3
drawPlate(ctx, point2D[0], point2D[4], point2D[5], point2D[1]);
//面4
drawPlate(ctx, point2D[1], point2D[5], point2D[6], point2D[2]);
//面5
drawPlate(ctx, point2D[2], point2D[6], point2D[7], point2D[3]);
//面6
drawPlate(ctx, point2D[4], point2D[5], point2D[6], point2D[7]);
        }
    }

    drawPlateWithColor = function(ctx, point1, point2, point3, point4, color) {
        drawPlate(ctx, point1, point2, point3, point4);
        ctx.fillStyle = color;
        ctx.fill();
    }

    drawPlate = function(ctx, point1, point2, point3, point4) {
        ctx.beginPath();
        ctx.moveTo(point1.x, point1.y);
        ctx.lineTo(point2.x, point2.y);
        ctx.lineTo(point3.x, point3.y);
        ctx.lineTo(point4.x, point4.y);
        ctx.closePath();
        ctx.stroke();
    }
}

function draw() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = 'red';
    var point5 = new Point3(0, 0, 0);
    var cammerV = CammerV(1, 1.5, 1);

    j = 360;
    // point5.rotaYByPoint(new Point3(1, 2, 1), 360);
    // sum = (1-point5.x)*(1-point5.x)+(2-point5.y)*(2-point5.y)+(1-point5.z)*(1-point5.z);
    // console.log("point5, i:%s, x:%s, y:%s, z:%s, sum:%s", i, point5.x, point5.y, point5.z, sum);
    for (i=0; i<=j; i++) {
        point5.rotaZByPoint(new Point3(4, 4, 4), 1);
        cammerV.rotaZByPoint(new Point3(0, 0, 0), 1);
        console.log("point5: x:%s, y:%s, z:%s", point5.x, point5.y, point5.z);
        console.log("cammerV: x:%s, y:%s, z:%s", cammerV.x, cammerV.y, cammerV.z);


        sum = (4-point5.x)*(4-point5.x)+(4-point5.y)*(4-point5.y)+(4-point5.z)*(4-point5.z);
        // console.log("sum:%s, i:%s", sum, i);
        // console.log("point5, i:%s, x:%s, y:%s, z:%s, sum:%s", i, point5.x, point5.y, point5.z, sum);
        point = point5.copy().conver3DTo2DPoint(Cammer(-3, -3, -3),  CammerV(1, 1.5, 1));
        // point = point5.copy().conver3DTo2DPoint(Cammer(4, 4, 4),  CammerV(-1, -1, -1));

        switch(i%3) {
            case 0:
            ctx.fillStyle = 'red';
            break;
            case 1:
            ctx.fillStyle = 'blue';

            break;
            case 2:
            ctx.fillStyle = 'green';
            break;
        }
        ctx.fillRect(point.x, point.y, 5, 5);

    
        // var start = new Date().getTime();
        // while(i == 180 && j == 180) {
        //     if (new Date().getTime() -start > 5000) {
        //         j = 360;
        //         ctx.fillStyle = 'blue';
        //     }
        // }
    }

    // var point2 = new Point3(0, 0, 0);
    // for (i=0; i<=360; i++) {
    //     point2.rotaYByPoint(new Point3(1, 2, 1), 1);
    //     sum = (1-point2.x)*(1-point2.x)+(2-point2.y)*(2-point2.y)+(1-point2.z)*(1-point2.z);
    //     // console.log("point4, i:%s, x:%s, y:%s, z:%s, sum:%s", i, point4.x, point4.y, point4.z, sum);
    //     point = point2.copy().conver3DTo2DPoint(Cammer(0, 0, 0), CammerV(1, 2, 1));
    //     ctx.fillRect(point.x, point.y, 2, 2);
    // }

    // var point4 = new Point3(0, 0, 0);
    // for (i=0; i<=360; i++) {
    //     point4.rotaXByPoint(new Point3(1, 2, 1), 1);
    //     sum = (1-point4.x)*(1-point4.x)+(2-point4.y)*(2-point4.y)+(1-point4.z)*(1-point4.z);
    //     // console.log("point4, i:%s, x:%s, y:%s, z:%s, sum:%s", i, point4.x, point4.y, point4.z, sum);
    //     point = point4.copy().conver3DTo2DPoint(Cammer(0, 0, 0), CammerV(1, 2, 1));
    //     ctx.fillRect(point.x, point.y, 2, 2);
    // }

    // var point3 = new Point3(0, 0, 0);
    // for (i=0; i<=360; i++) {
    //     point3.rotaZByPoint(new Point3(1, 2, 1), 1);
    //     sum = (1-point3.x)*(1-point3.x)+(2-point3.y)*(2-point3.y)+(1-point3.z)*(1-point3.z);
    //     // console.log("point3, i:%s, x:%s, y:%s, z:%s, sum:%s", i, point3.x, point3.y, point3.z, sum);
    //     point = point3.copy().conver3DTo2DPoint(Cammer(0, 0, 0), CammerV(1, 2, 1));
    //     ctx.fillRect(point.x, point.y, 2, 2);
    // }
}

function drawCube() {
    var cammer = Cammer(0, 0, 0);
    var cammerV = CammerV(1, 1.5, 1);
    var cammerTemp = cammer.copy();
    var cammerVTemp = cammerV.copy();
    var flag = false;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    setInterval(function(){
        ctx.clearRect(0, 0, 1000, 1000);
        // if (cammerV.x < 10 && flag == false) {
        //     cammerV.x = cammerV.x + 0.1;
        //     //    cammerV.y = cammerV.y - 0.1;
        //        cammerV.z = cammerV.z - 0.1;
        // } else {
        //     flag = true;
        //     cammerV.x = cammerV.x - 0.1;
        //     //    cammerV.y = cammerV.y + 0.1;
        //        cammerV.z = cammerV.z + 0.1;
        //        if (cammerV.x < -10) {
        //            flag = false;
        //        }
        // }
        cammer.rotaXByPoint(new Point3(4, 4, 4), 1);
        cammerV.rotaXByPoint(new Point3(0, 0, 0), 1);
        console.log("cammer, x:%s, y:%s, z:%s", cammer.x, cammer.y, cammer.z);
        console.log("cammerV, x:%s, y:%s, z:%s", cammerV.x, cammerV.y, cammerV.z);
        sum = (4-cammer.x)*(4-cammer.x) + (4-cammer.y)*(4-cammer.y) + (4-cammer.z)*(4-cammer.z);
        console.log("sum:%s", sum);

        sum = (4-cammer.x)*cammerV.x + (4-cammer.y)*cammerV.y + (4-cammer.z)*cammerV.z;
        console.log("sum:%s", sum);

        var cube = new Cube(new Point3(4,4,4), 2)
        ctx.strokeStyle = "red";
        ctx.lineWidth = 1;
        cube.drawCube(ctx, cammer, cammerV);

        cammerTemp = cammer.copy();
        point = cammerTemp.conver3DTo2DPoint(cammer, cammerV);
        ctx.fillRect(point.x, point.y, 4, 4);
        console.log("cammer: x:%s, y:%s", point.x, point.y);
    }, 50);
}

    function drawCube2() {
        var cammer = Cammer(0, 0, 0);
        var cammerV = CammerV(1, 1.5, 1);
        var cammerTemp = cammer.copy();
        var cammerVTemp = cammerV.copy();
        var flag = false;
        var canvas = document.getElementById("canvas2");
        var ctx = canvas.getContext("2d");
        setInterval(function(){
            ctx.clearRect(0, 0, 1000, 1000);
            // if (cammerV.x < 10 && flag == false) {
            //     cammerV.x = cammerV.x + 0.1;
            //     //    cammerV.y = cammerV.y - 0.1;
            //        cammerV.z = cammerV.z - 0.1;
            // } else {
            //     flag = true;
            //     cammerV.x = cammerV.x - 0.1;
            //     //    cammerV.y = cammerV.y + 0.1;
            //        cammerV.z = cammerV.z + 0.1;
            //        if (cammerV.x < -10) {
            //            flag = false;
            //        }
            // }
            cammer.rotaYByPoint(new Point3(4, 4, 4), 1);
            cammerV.rotaYByPoint(new Point3(0, 0, 0), 1);
            console.log("cammer, x:%s, y:%s, z:%s", cammer.x, cammer.y, cammer.z);
            console.log("cammerV, x:%s, y:%s, z:%s", cammerV.x, cammerV.y, cammerV.z);
            sum = (4-cammer.x)*(4-cammer.x) + (4-cammer.y)*(4-cammer.y) + (4-cammer.z)*(4-cammer.z);
            // console.log("sum:%s", sum);
    
            sum = (4-cammer.x)*cammerV.x + (4-cammer.y)*cammerV.y + (4-cammer.z)*cammerV.z;
            // console.log("sum:%s", sum);
    
            var cube = new Cube(new Point3(4,4,4), 2)
            ctx.strokeStyle = "red";
            ctx.lineWidth = 1;
            cube.drawCube(ctx, cammer, cammerV);
            
            cammerTemp = cammer.copy();
            point = cammerTemp.conver3DTo2DPoint(new Point3(4, 4, 4), CammerV(cammerV.x*-1, cammerV.y*-1, cammerV.z*-1));
            ctx.fillRect(point.x, point.y, 4, 4);
            console.log("2Dcammer: x:%s, y:%s", point.x, point.y);

        }, 50);
    }
        function drawCube3() {
            var cammer = Cammer(0, 0, 0);
            var cammerV = CammerV(1, 1.5, 1);
            var cammerTemp = cammer.copy();
            var cammerVTemp = cammerV.copy();
            var flag = false;
            var canvas = document.getElementById("canvas3");
            var ctx = canvas.getContext("2d");
            setInterval(function(){
                ctx.clearRect(0, 0, 1000, 1000);
                // if (cammerV.x < 10 && flag == false) {
                //     cammerV.x = cammerV.x + 0.1;
                //     //    cammerV.y = cammerV.y - 0.1;
                //        cammerV.z = cammerV.z - 0.1;
                // } else {
                //     flag = true;
                //     cammerV.x = cammerV.x - 0.1;
                //     //    cammerV.y = cammerV.y + 0.1;
                //        cammerV.z = cammerV.z + 0.1;
                //        if (cammerV.x < -10) {
                //            flag = false;
                //        }
                // }
                cammer.rotaZByPoint(new Point3(4, 4, 4), 1);
                cammerV.rotaZByPoint(new Point3(0, 0, 0), 1);
                console.log("cammer, x:%s, y:%s, z:%s", cammer.x, cammer.y, cammer.z);
                console.log("cammerV, x:%s, y:%s, z:%s", cammerV.x, cammerV.y, cammerV.z);
                sum = (4-cammer.x)*(4-cammer.x) + (4-cammer.y)*(4-cammer.y) + (4-cammer.z)*(4-cammer.z);
                console.log("sum:%s", sum);
        
                sum = (4-cammer.x)*cammerV.x + (4-cammer.y)*cammerV.y + (4-cammer.z)*cammerV.z;
                console.log("sum:%s", sum);
        
                var cube = new Cube(new Point3(4,4,4), 2)
                ctx.strokeStyle = "red";
                ctx.lineWidth = 1;
                cube.drawCube(ctx, cammer, cammerV);
                cammerTemp = cammer.copy();
                point = cammerTemp.conver3DTo2DPoint(new Point3(4, 4, 4), CammerV(cammerV.x*-1, cammerV.y*-1, cammerV.z*-1));
                ctx.fillRect(point.x, point.y, 4, 4);
            }, 50);
        }

    // for (i=1; i<360; i++) {
    //     var cammerTempCopy = cammerTemp.copy();
    //     var cammerVTempCopy = cammerVTemp.copy();
    //     cammerTempCopy.rotaXByPoint(new Point3(4, 4, 4), i);
    //     cammerVTempCopy.rotaXByPoint(new Point3(4, 4, 4), i);
    //     console.log("cammer, x:%s, y:%s, z:%s", cammerTempCopy.x, cammerTempCopy.y, cammerTempCopy.z);
    //     console.log("cammerV, x:%s, y:%s, z:%s", cammerVTempCopy.x, cammerVTempCopy.y, cammerVTempCopy.z);

    //     sum = (4-cammerTempCopy.x)*cammerVTempCopy.x + (4-cammerTempCopy.y)*cammerVTempCopy.y + (4-cammerTempCopy.z)*cammerVTempCopy.z;
    //     console.log("sum:%s", sum);

    //     ctx.strokeStyle = 'blue';
    //     point = cammerTempCopy.conver3DTo2DPoint(Cammer(0, 0, 0), CammerV(1, 1, 1));
    //     ctx.fillRect(point.x, point.y, 2, 2);

    //     point1 = cammerVTempCopy.conver3DTo2DPoint(Cammer(0, 0, 0), CammerV(1, 1, 1));
    //     ctx.fillRect(point1.x, point1.y, 2, 2);
    //     // ctx.beginPath();
    //     // ctx.moveTo(point.x, point.y);
    //     // ctx.lineTo(point1.x, point1.y);
    //     // ctx.closePath();
    //     // ctx.stroke();
    // }